<template>
  <van-image :src="bg" />
  <div class="container">
    <van-image class="logo" width="120" height="120" :src="logo" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="loginInfo.username" name="username" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请输入用户名' }]" />
        <van-field v-model="loginInfo.password" type="password" name="password" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请输入密码' }]" />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import {ref} from "vue";
import Toast from "vant";
import bg from "@/assets/imgs/login/bg.png";
import logo from "@/assets/logo.png";
import '@/mock/index'
import mockApi from "@/api/mockApi"
import pinia from "@/stores/index"
import useUserInfoStore from "@/stores/userInfo"
import { useRoute, useRouter } from "vue-router";

const loginInfo = ref({ username: "", password: "" })

const userInfoStore = useUserInfoStore(pinia)

const router = useRouter()

function onSubmit(values) {
  mockApi.login()
  .then((res) => {
    console.log(res.result.userInfo);
    userInfoStore.saveUserInfo(res.result.userInfo);
    sessionStorage.setItem("userInfo", JSON.stringify(res.result.userInfo));
    router.push("/home");
  })
  .catch((error) => {
    console.log(error);
    Toast.fail("登录失败！");
  });
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-50px);

  .logo {
    margin-bottom: 30px;
    border-radius: 50%;
    box-shadow: rgba(60, 57, 57, 0.902) 0px 3px 7px;
  }
}
</style>
